<template>
    <!-- 拨打电话弹出框 -->
    <nut-popup :visible="props.visible" @click-overlay="closeModal" close-on-click-overlay class="telphone"
        position="bottom" round :style="{ height: '60%' }">
        <view class="contenttel">
            <view class="teltop">拨打电话</view>
            <nut-picker :columns="dianhuacolumns" @change="onChange" :show-toolbar="false" />
            <nut-button class="dianhuabtn" round color="#0966FF" @click="call">
                <span><span class="dianhua"></span>拨打电话</span>
            </nut-button>
        </view>
    </nut-popup>
</template>
      
<script lang="ts" setup>
import { ref } from "vue";
import useOrderStore from "@/store/order";
import Taro from "@tarojs/taro";
import { CompanyInfoType } from "@/type";

const props = defineProps<{
    visible: boolean
    tel: string
}>()
const emit = defineEmits(['close'])

const orderStore = useOrderStore()

const dianhuacolumns = ref<any>([])

const myTel = ref('')

const reg = /[^\d-]/
const phone = ref('')

getwangdiandetail();

function onChange({ selectedValue }) {
    phone.value = selectedValue + ''
}

function call() {
    Taro.makePhoneCall({
        phoneNumber: phone.value //仅为示例，并非真实的电话号码
    })
}

//电话选择
function getwangdiandetail() {
    myTel.value = props.tel
    if (!myTel.value) {
        return
    }
    let arr: string[] = []
    arr = myTel.value.split(reg).filter(item => {
        return item
    })

    dianhuacolumns.value = arr.map((item, index) => {
        const str = myTel.value.split(item)[1]
        if (str[0] === '(') {
            const num = str.indexOf(')')
            let str1 = str.slice(1, num)
            return { text: item + `(${str1})`, value: arr[index] }
        }
        return { text: item, value: arr[index] }
    })

    phone.value = dianhuacolumns.value[0].value
}

function closeModal() {
    emit('close')
}
</script>
<style lang="scss">
* {
    box-sizing: border-box;
}

.telphone {
    .teltop {
        line-height: 112rpx;
        padding-left: 24rpx;
        font-weight: 600;
        font-size: 32rpx;
        box-sizing: border-box;
    }

    .dianhuacenter {
        width: 100%;
        height: 400rpx;
        // border: 1px solid red;
        margin-top: -20rpx;
    }

    .dianhuabtn {
        width: 702rpx;
        height: 88rpx;
        margin: 12rpx 24rpx 0;

        .dianhua {
            display: inline-block;
            width: 30rpx;
            height: 30rpx;
            margin-right: 8rpx;
            background: url("../../assets/images/icon_16pt_拨打网点电话@3x.png") no-repeat;
            background-size: 120%;
        }
    }
}
</style>
  